<template>
    <div>

        <!-- tabber -->
        <div id="bottom">
            <div class="bottom-container" @click="gotoHome()">
                <van-icon size="22" name="wap-home-o" /> 
                <div>首页</div>  
            </div>
            <div class="bottom-container" @click="gotoCart()"> 
                <van-icon size="22" name="shopping-cart-o" />
                <div>购物车</div>
            </div>
            <div class="bottom-container">
                <van-icon size="22" name="friends-o" />
                <div>我的</div>
            </div>
            <div class="bottom-container">
                <van-icon size="22" name="setting-o" />
                <div>设置</div>
            </div>
        </div>

        
    </div>
</template>

<script>
export default {
    data() {
        return {
            
        }
    },
    methods: {
        gotoHome(){
            this.$router.push("/");
        },
        gotoCart(){
            this.$router.push("/Cart");
        }
    },
}
</script>

<style lang="scss">
    #bottom{
        width:100%;
        height:64px;
        background-color: #fff;
        // border-top:1px solid lightgray; 
        display: inline-flex;
        justify-content: space-around;
        align-items: center;
        position: fixed;
        left: 0;
        bottom: 0;
        z-index: 999;
        .bottom-container{
            width:25%;
            height:100%;
            text-align: center;
            // border:1px solid red;
            font-size: 14px;
            .van-icon{
                height:50%;
                // border:1px solid red;
                display: inline-flex;
                align-items: flex-end;
            }
            div{
                height:50%;
                // border:1px solid red;
            }
        }
        .bottom-container:hover{
            color:red;
        }
    }
</style>